<template>
    <container type="top-header" :show="{header:formShow}" class="g-width100 g-height100" header-style="height:auto;" main-style="padding:0;">
        <Form slot="header" inline
              ref="form"
              submit-bus-key="MpTempMsgManageList"
              :form-items="formItems"
              label-width=""
        ></Form>
        <div slot="main">
            <Table
                   ref="table"
                   form-submit-bus-key="MpTempMsgManageList"
                   :columns="columns"
                   :operations="tableOperations"
                   unique-label="name"
                   v-on:toolbarSearchClick="formShow = !formShow"
            ></Table>
            <el-dialog
                    title="模板消息发送"
                    :visible.sync="tempMsgSendDialogVisible"
                    width="800px">
                <MpTempMsgSend :app-code="msgSendProps.appCode"
                               :template-content="msgSendProps.templateContent"
                               :template-id="msgSendProps.templateId"
                               :template-title="msgSendProps.templateTitle"
                ></MpTempMsgSend>
            </el-dialog>
        </div>

    </container>
</template>

<script>
    import Container from '../../../../../common-util/src/components/page/Container.vue'
    import Form from '../../../../../common-util/src/components/page/Form.vue'
    import Table from '../../../../../common-util/src/components/page/Table.vue'
    import MpTempMsgSend from "./MpTempMsgSend";

    export default {
        components:{
            Form,
            Table,
            Container,
            MpTempMsgSend
        },
        data(){
            return {
                formShow: true,
                tempMsgSendDialogVisible: false,
                msgSendProps:{
                    appCode: null,
                    templateId: null,
                    templateContent: null,
                    templateTitle: null
                },
                formItems:[
                    {
                        field: {
                            name: 'appCode'
                        },
                        element:{
                            type: 'select',
                            select:{
                                url: this.$baseURL.wx + '/wx/mp/config/list',
                                optionProp:{
                                    value: 'appCode',
                                    label: 'appName'
                                }
                            },
                            required: true,
                            label: '公众号',
                        }
                    },
                    {
                        element:{
                            type: 'button',
                            button:[
                                {
                                    action: 'submit',
                                    requestMethod:'get',
                                    url: this.searchUrl,
                                    label: '查询'
                                },
                                {
                                    action: 'reset',
                                    label: '重置'
                                }
                            ]
                        }
                    }
                ],
                columns:[
                    {
                        prop: 'templateId',
                        label:'模板id'
                    },
                    {
                        prop: 'title',
                        label:'模板标题'
                    },
                    {
                        prop: 'primaryIndustry',
                        label:'一级行业'
                    },
                    {
                        prop: 'deputyIndustry',
                        label:'二级行业'
                    },
                    {
                        prop: 'content',
                        label:'模板内容',
                        showInDetail: true
                    },
                    {
                        prop: 'example',
                        label:'模板示例',
                        showInDetail: true
                    },
                ],
                tableOperations:[
                    {
                        action: this.addTemplate,
                        code: 'addTemplateButtonCode',
                        label: '添加模板到后台'
                    },
                    {
                        action: 'detail',
                        disabledOnMissingSelect:true,
                        label:'详情'
                    },
                    {
                        action: this.sendTemplateMsg,
                        disabledOnMissingSelect:true,
                        code: 'senTemplateMsgButtonCode',
                        label:'发送模板消息'
                    },
                    {
                        action: 'delete',
                        delete:{
                            tip: '确定要删除吗？删除后可能会导致已经使用该模板的功能失效！'
                        },
                        url:this.deleteUrl,
                        disabledOnMissingSelect:true,
                        label:'删除'
                    }
                ]
            }
        },
        methods:{
            ensureAppCode(msgTip) {
                let form = this.$refs.form.getFormData()
                let appCode = form.appCode
                if(!appCode){
                    if(msgTip){
                        this.$message.error('请选择公众号')
                    }
                    return false
                }
                return appCode
            },
            searchUrl(form){
                let appCode = this.ensureAppCode()
                if(appCode === false){
                    return false
                }
                return this.$baseURL.wx + '/wx/mp/tempmsg/' + appCode + '/templateList'
            },
            deleteUrl(row){
                let appCode = this.ensureAppCode(true)
                if(appCode === false){
                    return false
                }
                return this.$baseURL.wx + '/wx/mp/tempmsg/' + appCode + '/deleteTemplate/' + row.templateId
            },
            // 添加模板到后台
            addTemplate() {
                let appCode = this.ensureAppCode(true)
                if(appCode === false){
                    return false
                }
                this.$prompt('请输入模板id', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPlaceholder: '模板id，微信官网后台模板库中模板的编号',
                    inputValidator:(value)=>{return !!value},
                    inputErrorMessage: '模板id不能为空'
                }).then(({ value }) => {
                    this.axios.post(this.$baseURL.wx + '/wx/mp/tempmsg/' + appCode + '/addTemplate' + value)
                        .then(res=>{
                            this.$message.success('添加成功，请重新查询查看')
                        }).catch(error=>{
                            if(error.response){
                                this.$message.error(error.response.data.msg)
                            }else {
                                this.$message.error('网络错误或服务不可用')
                            }
                    })
                }).catch(() => {

                })
            },
            // 发送模板消息
            sendTemplateMsg(row) {
                let appCode = this.ensureAppCode(true)
                if(appCode === false){
                    return false
                }
                this.msgSendProps.appCode = appCode
                this.msgSendProps.templateId = row.templateId
                this.msgSendProps.templateContent = row.content
                this.msgSendProps.templateTitle = row.title
                this.tempMsgSendDialogVisible = true

            }
        }
    }
</script>

<style scoped>

</style>